<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from '../mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    listData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      const colorList = [
        '#CF4645', '#B580B2', '#29008A', '#146A90', '#8956FF', '#70C9A8',
        '#bfbfbf', '#595959',
        '#40a9ff', '#1890ff',
        '#ffd666', '#ffc53d', '#ffc53d', '#ffc069', '#ffa940', '#fa8c16',
        '#eccbd9', '#ffadad', '#ff6392', '#ffc09f', '#ffcb77', '#ffe066', '#ffd53e', '#ffda3d', '#adf7b6', '#a0e8af', '#80ed99', '#07beb8', '#17c3b2', '#48cae4', '#97d2fb', '#83bcff', '#91e5f6', '#9381ff']
      const colorListLen = colorList.length
      const fontSizeList = [
        12, 12.5, 13, 13.5, 14, 14.5,
        15, 15.5, 16, 16.5, 17, 17.5,
        18, 18.5, 19, 19.5, 20, 20.5,
        21, 22, 23,
        24]
      const fontSizeListLen = fontSizeList.length
      //   const customLabel = {
      //     color: colorList[Math.floor(Math.random() * colorListLen)],
      //     fontSize: fontSizeList[Math.floor(Math.random() * fontSizeListLen)]
      //   }
      const bgColor = '#fffcf9'
      const canDraggable = true

      // 设置数据
      const data = []
      this.listData.forEach((v, index) => {
        data.push({
          id: index,
          name: v,
          value: Math.floor(Math.random() * (50 - 2)) + 2,
          draggable: canDraggable,
          itemStyle: {
            color: bgColor
          },
          label: {
            color: colorList[Math.floor(Math.random() * colorListLen)],
            fontSize: fontSizeList[Math.floor(Math.random() * fontSizeListLen)]
          }
        })
      })
      this.chart.setOption({
        color: ['#37A2DA', '#32C5E9', '#67E0E3'],
        title: {
          show: false,
          text: '公告词云统计',
          x: 'center',
          y: 'bottom',
          // 文字的颜色,默认 #333。
          color: '#666',
          fontSize: 24
        },
        toolbox: {
          show: false,
          feature: {
            // dataView: {readOnly: false},
            // magicType: {type: ['line', 'bar']},
            restore: {}
            // saveAsImage: {}
          }
        },
        itemStyle: {
          color: bgColor
        },
        series: [
          {
            type: 'graph',
            layout: 'force',
            force: {
              repulsion: 80,
              edgeLength: 10
            },
            roam: 'scale',
            // symbol: '',
            // symbolSize: 0,
            label: {
              show: true,
              color: 'auto',
              fontSize: 14
            },
            data
          }
        ]
      })
      window.resize = () => {
        this.chart.resize()
      }
    }
  }
}
</script>
